<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link href="/erp/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/erp/font/css/font-awesome.min.css"/>
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link href="/erp/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome.min.css"/>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/erp/assets/css/ace-ie.min.css"/>
    <![endif]-->
    <script src="/erp/js/jquery-1.9.1.min.js"></script>
    <script src="/erp/assets/js/bootstrap.min.js"></script>
    <script src="/erp/assets/js/typeahead-bs2.min.js"></script>
    <script src="/erp/assets/js/jquery.dataTables.min.js"></script>
    <script src="/erp/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="/erp/assets/layer/layer.js" type="text/javascript"></script>
    <script src="/erp/assets/laydate/laydate.js" type="text/javascript"></script>
    <script src="/erp/js/displayPart.js" type="text/javascript"></script>
    <title>添加移库</title>
</head>
<body>


<!--移出商品信息-->
<div class="add_menber" id="add_menber_style">

    <ul class=" page-content">
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>移出库名：</label>
            <div class="formControls " style="width:280px;">
                <select class="ck" style="margin-left:10px;">
                    <option>请选择仓库名</option>
                </select>
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <label class="form-label"><span class="c-red">*</span>转移商品名称：</label>
            <div class="formControls ">
                <input type="text" class="input-text" value="" placeholder="" id="pname" name="pname">
            </div>
        </div>
        <div class="Operate_cont clearfix">
            <table class="table table-striped table-bordered table-hover" id="table1">
                <thead>
                <tr>
                    <th width="70">序号</th>
                    <th width="100">商品ID</th>
                    <th width="100">商品名称</th>
                    <th width="100">仓库名称</th>
                    <th width="100">货区名称</th>
                    <th width="100">货架编号</th>
                    <th width="100">货位编号</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
            </table>
        </div>
        <!---------------------------------------------------------------------------------------------------------------->
        <!--移入信息-->
        <div class="Operate_cont clearfix">
            <table class="table table-striped table-bordered table-hover" id="table2">
                <thead>
                <tr>
                    <th width="70">序号</th>
                    <th width="100">商品ID</th>
                    <th width="100">商品名称</th>
                    <th width="100">入库库名</th>
                    <th width="100">入库区域</th>
                    <th width="100">入库货架</th>
                    <th width="100">入库货位</th>
                    <th width="100">状态</th>
                    <th width="100">确认入库</th>
                </tr>
                </thead>
            </table>
        </div>

        <div class="Operate_cont clearfix">
            <form>
                <ul class="Info_style clearfix" style="width:900px; margin-left:30px;">
                    <li><label class="label_name">负责人：</label> <span class="name"><input type="text" class="input-text"
                                                                                         value="" placeholder=""
                                                                                         id="principal"
                                                                                         name="principal"></span>
                        <label class="form-label" id="tsprincipal"></label>
                    </li>
                    <li><label class="label_name">联系电话：</label>
                        <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
                        <label id="tsphone"></label>
                    </li>

                    <li style="width:700px;"><label class="label_name">移库原因：</label><span class="name"><textarea
                            style="width:505px;height:100px;" name="cause" id="cause"></textarea></span>
                        <label class="form-label" id="tscause"></label>
                    </li>
                </ul>
            </form>
        </div>

    </ul>

</div>

<script>

    var w;
    //移出仓库下拉框数据
    $.get("/io-warehouse/warehouseAll", function (res) {
        w = res;
        $(".ck").empty();
        $(".ck").append("<option>请选择仓库名</option>")
        for (var c in res) {
            $('.ck').append("<option value='" + res[c].id + "'>" + res[c].warehouseName + "</option>")
        }
    })

    // $(".ck").change(function () {
    //     alert( $(".ck option:checked").text());
    // })

    //移出商品的信息
    $("#pname").keydown(function (e) {
        if (e.keyCode == 13) {
            var pname = $("#pname").val();
            var ck = $(".ck").val();
            //DataTable表格
            var oTable1 = $('#table1').DataTable({
                "serverSide": false,     // true表示使用后台分页
                "paging": false,
                "destroy": true,
                ajax: {
                    "url": "/io-move/outAll",  // 异步传输的后端接口url
                    "data": {
                        "pname": pname,
                        "ck": ck
                    },
                    "type": "POST",  // 请求方式
                    "dataSrc": ''
                },
                "bStateSave": true,//状态保存
                'autoWidth': true,
                "columns": [
                    {
                        "data": "id"
                    },
                    {"data": "pid"},
                    {"data": "pname"},
                    {"data": "ck"},
                    {"data": "hq"},
                    {"data": "hj"},
                    {"data": "hw"},
                    {
                        "data": "id",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            console.log("123");
                            $(td).empty().append('<a onClick="member_stop(this)" href="javascript:;" title="确定" class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a>');
                        }
                    }
                ]
            });

        }
    });

    //点击要移出的商品把该商品信息移动到入库的列表里面
    function member_stop(obj) {
        var tds = $(obj).parent().parent().find("td");
        console.log("bbb");
        var id = $(tds[0]).text();
        var pid = $(tds[1]).text();
        var name = $(tds[2]).text();
        var tr = $("<tr></tr>");
        $("#table2").append(tr);
        tr.append("<td>" + id + "</td>");
        tr.append("<td>" + pid + "</td>");
        tr.append("<td>" + name + "</td>");
        tr.append("<td><select class='ck'></select></td>");
        tr.append("<td><select class='hq'></select></td>");
        tr.append("<td><select class='hj'></select></td>");
        tr.append("<td><select class='hw'></select></td>");
        tr.append('<td><span class="td-status">未确定</span></td>');
        tr.append('<td><a onClick="member_add(' + $('#table2 tr').index(tr) + ')" href="javascript:;" title="确定" class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a></td>');
        $(obj).remove();
        $(".ck").empty();
        $(".ck").append("<option>请选择仓库名</option>")
        $(".hq").append("<option>请选择货区</option>")
        $(".hj").append("<option>请选择货架</option>")
        $(".hw").append("<option>请选择货位</option>")
        for (var c in w) {
            $('.ck').append("<option value='" + w[c].id + "'>" + w[c].warehouseName + "</option>")
        }

    }


    //加载货区
    $('#table2').on('change', '.ck', function () {
        console.log("123");
        var a = $(this).val();
        var hq = $(this).parent().parent().find(".hq");
        $.get("/io-warehouse/areaAll?warehouseName=" + a, function (res) {
            $(hq).empty();
            $(hq).append("<option>请选择货区</option>")
            for (var q in res) {
                $(hq).append("<option value='" + res[q].id + "'>" + res[q].name + "</option>")
            }
        });
    })

    //加载货架
    $('#table2').on('change', '.hq', function () {
        var w = $(this).parent().parent().find(".ck").val();
        var a = $(this).parent().parent().find(".hq").val();
        var hj = $(this).parent().parent().find(".hj");
        $.post("/io-warehouse/shelfAll", {
            warehouseName: w,
            areaName: a
        }, function (res) {
            $(hj).empty()
            $(hj).append("<option>请选择货架</option>")
            for (var q in res) {
                $(hj).append("<option value='" + res[q].id + "'>" + res[q].shelfNo + "</option>")
            }
        })

    })

    //加载货位
    $('#table2').on('change', '.hj', function () {

        var w = $(this).parent().parent().find(".ck").val();
        var a = $(this).parent().parent().find(".hq").val();
        var s = $(this).parent().parent().find(".hj").val();
        var hw = $(this).parent().parent().find(".hw");
        $.post("/io-warehouse/spaceAll", {
            warehouseName: w,
            areaName: a,
            shelfNo: s
        }, function (res) {
            $(hw).empty();
            $(hw).append("<option>请选择货位</option>")
            for (var q in res) {
                $(hw).append("<option>" + res[q].spaceNo + "</option>")
            }
        })
    });

    // $("#principal").blur(function () {
    //     var principal = $("#principal").val();
    //     if (principal == "" || principal == null) {
    //         $("#tsprincipal").empty().append("<font color=\"#FF0000\">负责人不能为空</font>");
    //         $("#principal").focus();
    //     } else {
    //         $("#tsprincipal").empty();
    //     }
    // });
    //
    $("#phone").blur(function () {
        var phone = $("#phone").val();
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#tsphone").empty().append("<font color=\"#FF0000\">请输入正确的电话号码</font>");
            $("#phone").focus();
        } else {
            $("#tsphone").empty();
        }
    });
    //
    // $("#cause").blur(function () {
    //     var cause = $("#cause").val();
    //     if (cause == "" || cause == null) {
    //         $("#tscause").empty().append("<font color=\"#FF0000\">原因不能为空</font>");
    //         $("#cause").focus();
    //     } else {
    //         $("#tscause").empty();
    //     }
    // });


    //库存移库的入库
    function member_add(obj) {
        if($("#principal").val()==""||$("#principal").val()==null||$("#phone").val()==""||$("#phone").val()==null||$("#cause").val()==""||$("#cause").val()==null){
            layer.msg('有选项为空,请根据提示把信息填完整',{icon: 5,time:3000});
            return;
        }
        console.log("lllllll");
        var tds = $('#table2 tr:eq(' + (obj) + ')').find("td");
        console.log("xxx");
        var row = {
            hid: $(tds[0]).text(),
            pid: $(tds[1]).text(),
            pname: $(tds[2]).text(),
            ck: $(tds[3]).children().val(),
            hq: $(tds[4]).children().val(),
            hj: $(tds[5]).children().val(),
            hw: $(tds[6]).children().val()
        };
        var data = $.param(row) + "&" + $('form').serialize();
        console.log(data);

        if (row.ck!='0'&&row.hq!='0'&&row.hj!='0'&&row.hw!='0') {
            $.post("/io-move/moveAdd", data, function (res) {
                if (res.flag) {
                    layer.msg(res.message, {icon: 6, time: 1000});
                    $('#table2 tr:eq(' + (obj) + ')').find(".td-status").html('<span class="label label-success radius">已入库</span>');
                    $('#table2 tr:eq(' + (obj) + ')').find("a").remove();
                    $("#hidden",window.parent.document).click();
                } else {
                    layer.msg(res.message, {icon: 5, time: 1000});
                }
            })
        }else {
            layer.msg('请把入库的仓库具体信息填完整',{icon: 5,time:3000});
        }
    }


</script>

</body>
</html>